 <template>
  <view class="warp">
    <view class="header">
      <image
        class=""
        src="../../static/logo.png"
        style="width: 100%; height: 100%"
      ></image>
    </view>
    <view class="main">
      <view class="coach-info" style="height: 150rpx; border-radius: 20rpx; margin-top: -100rpx;">
      <image
        class="coach-avatar"
         src="../../static/jihua.png"
        style="width: 100rpx; height: 100rpx"
      ></image>
      <view class="coach-details">
        <view class="coach-name mb30r">{{userName || '教练名称'}} </view>
        <view class="contact-service">联系客服</view>
      </view>
    </view>
    <view class="plan-info" style="height: 200rpx; border-radius: 20rpx;">
      <view class="plan-item" style="display: flex; align-items: center;">
        <image
          class="plan-icon"
          src="../../static/jihua.png"
          style="width: 160rpx; height:160rpx"
        ></image>
        <view class="plan-details" style="display: flex; flex-direction: column; justify-content: space-between;">
          <view class="plan-title" style="align-self: flex-start;">本月计划</view>
          <view class="plan-number tc" style="align-self: center;">10</view>
        </view>
      </view>
      <view class="plan-item" style="display: flex; align-items: center;">
        <image
          class="plan-icon"
          src="../../static/ceshi.png"
          style="width: 160rpx; height:160rpx"
        ></image>
        <view class="plan-details" style="display: flex; flex-direction: column; justify-content: space-between;">
          <view class="plan-title" style="align-self: flex-start;">本月测试</view>
          <view class="plan-number tc" style="align-self: center;">5</view>
        </view>
      </view>
    </view>
      <view class="content">
        <view class="f ac xc xb con_detail" style="width: 100%">
          <view class="tc" style="width: 50%" @click="goUrl(1)">
            <image
              class=""
              src="../../static/muban.png"
              style="width: 160rpx; height: 160rpx"
            ></image>
            <view class="fs32r fw8">课程模板</view>
          </view>

          <view class="tc" style="width: 50%" @click="goUrl(2)">
            <image
              class=""
              src="../../static/beike.png"
              style="width: 160rpx; height: 160rpx"
            ></image>
            <view class="fs32r fw8">备课</view>
          </view>
        </view>
        <view class="mt20r button-group">
        <view class="btn tc" @click="goUrl(3)">开始上课</view>
        <view class="btn  tc" @click="showQrCode">邀请教练</view>
      </view>


        
      </view>

    </view>

    <!-- 二维码弹窗 -->
    <view class="qr-modal" v-if="showModal" @click.stop="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">邀请教练加入</text>
          <text class="close-btn" @click="closeModal">×</text>
        </view>
        <view class="qr-container">
          <image class="qr-code" :src="qrCodeUrl" mode="aspectFit"></image>
          <text class="qr-tip">扫描二维码加入团队</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { qrcode, planDetails ,coach} from "../../api/fit";
export default {
  data() {
    return {
      baseList: [
        {
          name: "photo",
          title: "图片",
        },
        {
          name: "lock",
          title: "锁头",
        },
      ],
      showModal: false,
      qrCodeUrl: "",
      role: '',
      planName: '',
      userName:'',
      dataList: [],
      unitOptions: [
        { label: "次", value: "c" },
        { label: "秒", value: "s" },
        { label: "分", value: "m" },
      ],
    };
  },

  async onLoad() {
    // 获取二维码
    await this.getQrCode();
    // 获取role
    this.role = uni.getStorageSync('role');
    // 获取计划详情
    await this.getPlanDetails();
    this.userName = uni.getStorageSync('role_name')
  },

  onShareAppMessage(res) {
    return {
      title: "思行新青",
      path: "/pages/index/index",
      imageUrl: "../../static/logo.jpg",
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },

  onShareTimeline() {
    return {
      title: "思行新青",
      query: "",
      imageUrl: "../../static/logo.jpg",
    };
  },

  methods: {
    async getQrCode() {
      try {
        const res = await qrcode();
        this.qrCodeUrl = 'http://110.40.135.120:8080/common/qrcode?token=' + 'Bearer ' + uni.getStorageSync('token');
      } catch (err) {
        console.error(err);
      }
    },

    async getPlanDetails() {
      try {
        let data = {
          userId: uni.getStorageSync('role_id'),
        }
        const res = await coach(data);
        console.log(res,'sadasdas');
        this.dataList = res.data.nodes;
        this.planName = res.data.planName;
      } catch (err) {
        console.error(err);
      }
    },

    showQrCode() {
      this.showModal = true;
    },

    closeModal() {
      this.showModal = false;
    },

    goUrl(type) {
      if (type == 1) {
        uni.redirectTo({
          url: "/pages/muban/list",
        });
      } else if (type == 2) {
        uni.redirectTo({
          url: "/pages/customer/index",
        });
      } else {
        uni.redirectTo({
          url: "/pages/kecheng/customer",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page{
  background: #ededed;
}
.wrap {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.header {
  height: 40vh;
}

.coach-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  margin-top: -75rpx; /* 往上移动，覆盖部分logo */
  z-index: 1;

  .coach-avatar {
    border-radius: 50%;
  }

  .coach-details {
    margin-left: 20rpx;

    .coach-name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .contact-service {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.plan-info {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background: #fff;
  margin: 20rpx 0; /* 上下边距 */

  .plan-item {
    display: flex;
    align-items: flex-start;

    .plan-icon {
      margin-right: 10rpx;
    }

    .plan-details {
      .plan-title {
        font-size: 28rpx;
        color: #333;
      }

      .plan-number {
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
        margin-top: 10rpx;
      }
    }
  }
}

.content {
  height: 30vh;
  padding: 60rpx 20rpx 20rpx 20rpx;
  border-radius: 40rpx;
  // border: 4rpx solid #000;
  background: #fff;
  margin-bottom: 20rpx;

  .con_detail {
  }
}

.main {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.btn {
  padding: 24rpx;
  border: 4rpx solid #000;
  border-radius: 16rpx;
  background: #000;
  color: white;
}

.invite-btn {
  padding: 24rpx;
  border: 4rpx solid #000;
  border-radius: 16rpx;
  background: white;
  color: #000;
  font-weight: bold;
  transition: all 0.3s;

  &:active {
    background: #f5f5f5;
  }
}

.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .modal-content {
    width: 80%;
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .close-btn {
        font-size: 40rpx;
        color: #999;
        padding: 8rpx;
      }
    }

    .qr-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16rpx;

      .qr-code {
        width: 320rpx;
        height: 320rpx;
        margin-bottom: 24rpx;
      }

      .qr-tip {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>
